<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1 {
				width: 200px;
				height: 200px;
				background: yellow;
				border: 1px solid black;
			}
		</style>
	</head>

	<body>
		<div id="main">

		</div>
		<script type="text/javascript">
			test();
			function test() {
				//创建input
				var inp = document.createElement("input");
				inp.setAttribute("type", "text");
				inp.setAttribute("value", "范啸天");
				var main = document.getElementById("main");
				//追加节点
				main.appendChild(inp);
				//添加超链接
				var a = document.createElement("a");
				a.setAttribute("href", "index.html");
				a.innerHTML = "去第一个页面<br />";
				main.insertBefore(a, inp);
				//添加div
				var div = document.createElement("div");
				div.setAttribute("class", "div1");
				main.appendChild(div);
				//复制
				var div2 = div.cloneNode();
				main.appendChild(div2);
				//删除
				var divr=main.lastElementChild;
				main.removeChild(divr);
				//替换
				var btn=document.createElement("input");
				btn.setAttribute("type","button");
				btn.setAttribute("value","按钮")
				main.replaceChild(btn,inp);
			}
		</script>
	</body>

</html>